<!-- 收支查询页 -->
<template>
  <div class="revexpOperate">
    <span>
      <el-input v-model="inputSearch" class="search" placeholder="请输入搜索条件" />
      <el-button icon="Search" @click="getRevExp(true)">搜索</el-button>
    </span>
    <span class="right">
      <!-- 新增 -->
      <div>
        <el-button @click="handleAdd" class="add" icon="Plus">新增</el-button>
        <el-dialog v-model="dialogVisible" :title="formType == 0 ? '新增收支明细' : '编辑收支明细'" destroy-on-close="true" :before-close="handleClose"
          width="35%" align-center>
          <el-form ref="formRef" :model="formData" :rules="rules">
            <!-- 添加者 -->
            <el-form-item label="添加者" prop="adder" label-width="80px" v-if="formType == 1">
              <el-select v-model="formData.adder" style="width: 220px; text-align: center">
                <el-option v-for="item in optionsAdder" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <!-- 金额 -->
            <el-form-item label="金额" prop="money" label-width="80px">
              <el-input-number v-model="formData.money" :min="0" :precision="2" style="width: 220px" />
            </el-form-item>
            <!-- 类型 -->
            <el-form-item label="类型" prop="type" label-width="80px">
              <el-select v-model="formData.type" style="width: 220px; text-align: center">
                <el-option label="收入" key="0" value="0" style="text-align: center" />
                <el-option label="支出" key="1" value="1" style="text-align: center" />
              </el-select>
            </el-form-item>
            <!-- 描述 -->
            <el-form-item label="描述" prop="describes" label-width="80px">
              <el-input v-model="formData.describes" placeholder="请填写描述内容" style="width: 220px" maxlength="10" />
            </el-form-item>
            <!-- 日期 -->
            <el-form-item label="日期" prop="date" label-width="80px">
              <el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" :size="size" />
            </el-form-item>
          </el-form>
          <!-- 确认与取消 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submit">确认</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </span>
  </div>
  <hr style="background-color: #e8e8e8; height: 2px; border: none" />
  <!-- 表格 -->
  <el-table :data="revExpInfo.list" stripe style="width: 100%">
    <el-table-column prop="adder" label="添加者" />
    <el-table-column prop="money" label="金额" />
    <el-table-column prop="typeName" label="类型名称" />
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="describes" label="描述" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleChange(scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除？" @confirm="delRevExp(scope.row.id,scope.$index)">
          <template #reference>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页按钮 -->
  <el-pagination background layout="prev, pager, next" :total="revExpInfo.total" v-model:current-page="page"
    @current-change="getRevExp" />
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { getNameList } from '@/api/user';
import { add,edit,del,getPageByDescribes } from '@/api/revexp';
import { userInfoStore } from '@/store';

const userStore = userInfoStore();

const formRef = ref(null);
const inputSearch = ref("");
const revExpInfo = ref([]);
const page = ref(1);
//用户数据列表
const optionsAdder = ref([]);

let dialogVisible = ref(false);
let formType = ref(0); // 0表示新增的浮窗 1表示编辑
//表单数据
const formData = reactive({
  id: 0,
  adder: userStore.name,//初始值应设定为当前账户name
  money: "",
  type: "",
  describes: "",
  date: "",
});
//设置必填项
const rules = {
  adder: [{ required: true, message: "添加者不能为空", trigger: "blur" }],
  money: [{ required: true, message: "金额不能为空", trigger: "blur" }],
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
  describes: [{ required: true, message: "描述不能为空", trigger: "blur" }],
  date: [{ required: true, message: "日期不能为空", trigger: "blur" }],
};
//新增事件
const handleAdd = () => {
  formType.value = 0;
  dialogVisible.value = true;
};

//编辑事件
const handleChange = (data) => {
  getUsersName();
  formType.value = 1;
  dialogVisible.value = true;
  nextTick(() => {
    formData.id = data.id;
    formData.adder = data.adder;
    formData.money = data.money;
    formData.type = data.type + '';
    formData.describes = data.describes;
    formData.date = data.date;
  })
}

//提交用户表单
const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      //后续对表单数据的处理
      if (formType.value === 0) {
        //新增数据时
        addRevexp();
      } else {
        //编辑数据时
        editRevexp();
      }
      //清空表单的内容
      formRef.value.resetFields();
      //关闭弹窗
      dialogVisible.value = false;
    }
  });
};
//弹窗关闭的时候
const handleClose = () => {
  formRef.value.resetFields();
  dialogVisible.value = false;
  getRevExp(false);
};
//取消
const cancel = () => {
  handleClose();
};

const getRevExp = (isSearch) => {
  if (isSearch === true) {
    page.value = 1;
  }
  getPageByDescribes(page.value,inputSearch.value).then((res) => {
    revExpInfo.value = res.data;
  });
};

const delRevExp = (id,index) => {
  del(id);
  getRevExp(false);
};

const addRevexp = () => {
  add(formData).then(() => {
    getRevExp(false);
  })
};

const editRevexp = () => {
  edit(formData).then(() => {
    getRevExp(false);
  })
}

const getUsersName = () => {
  getNameList().then((res) => {
    optionsAdder.value = res.data;
  })
};

onMounted(() => {
  getRevExp();
});
</script>

<style>
.revexpOperate .search {
  width: 300px;
}

.revexpOperate .right {
  float: right;
  margin-right: 50px;
}

.el-table {
  /* font-size: 12px; */
  --el-table-header-bg-color: #a1a3a650;
}

.el-table .cell {
  text-align: center;
}

.el-input-number span {
  display: none;
}

.el-input-number .el-input__inner {
  text-align: left;
}

.el-input-number .el-input__wrapper {
  padding-left: 11px;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>